<!-- 新手引导 -->
<template>
    <transition name='fade'>
        <div class="guide-mask mask" v-show="guideShow">
            <!-- 欢迎页 -->
            <transition name='loading'>
                <Loading v-show="loadingShow" @loadingClose="loadingClose"></Loading>
            </transition>
            <div class="guide-close" @click.stop="guideClose()">跳过</div>
            <div class="guide-con" @click.stop="goNext(guideIndex)">
                <div class="guide-bg" v-show="type==1 && guideIndex==1 || type==1 && guideIndex==6 || type==1 && guideIndex==7"></div>
                <img ref="guide-img" :class="'guide'+type+'-'+guideIndex" :src="'@/../static/img/guide/'+type+'-'+guideIndex+'.png'" alt="" v-show="guideImgShow">
            </div>
        </div>
    </transition>
</template>

<script>
import { axGet,axPost } from '@/api/index'
import { imgLoad } from '@/assets/js/base'
import Loading from '@/components/Loading'

export default {
    name: "classStudent",
    props:[
        "guideShow",
    ],
    components: { 
		Loading,
	},
    data(){
        return{
            type:this.$parent.myInfo.UserType,//0学生，1教师
            guideIndex:0,
            guideImgShow:true,

            loadingShow:false,
        }
    },
    watch:{
        guideShow(newVal,oldVal){
            if(newVal){
                touchFalse() 
            }else{
                touchTrue()
            }
        },
        
    },
    created(){ 
        this.$parent.menuShow=true;

        this.loadingShow=localStorage.getItem("hasLoading"+this.type)==1 ? false : true;
       

    },
    mounted(){
        
    },
    destroyed(){
        localStorage.setItem("hasGuide"+this.type,1)
    },
    methods:{
        loadingClose(){
            this.loadingShow=false
            localStorage.setItem("hasLoading"+this.type,1)
		},
        guideClose(){
           this.$emit('guideClose') 
        },
        goNext(i){
            this.guideImgShow=false
            if(i==1){
                this.$router.push({path:'/library',query: {}});
            }else if(i==3){
                if(this.type==1){
                    this.$router.push({path:'/classTeacher',query: {}});
                }else{
                    this.$router.push({path:'/taskList',query: {}});
                }
            }else if(i==5 && this.type==0){
                this.$router.push({path:'/user',query: {}});
            }else if(i==7 && this.type==1){
                this.$emit('guideClose') 
                this.$router.push({path:'/bookshelf',query: {}});
                return;
            }else if(i==8 && this.type==0){
                this.$emit('guideClose') 
                this.$router.push({path:'/bookshelf',query: {}});
                return;
            }
            this.guideIndex++
            
            imgLoad(this.$refs['guide-img'],()=>{
                this.guideImgShow=true
            })
        },
    }
}
</script>
<style type="text/css" scoped>
.loading-leave-active{
	animation-name:fadeOutLeft;
	animation-duration:.3s;
}
.guide-mask{
    background: rgba(0,0,0,0.75);
    overflow: hidden;
}
.guide-close{
    position: absolute;
    top: 0.4rem;
    right: 0.32rem;
    z-index: 100;
    width: 1.2rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 0.26rem;
    color: #fff;
    line-height: 1;
    padding: 0.28rem 0;
    text-align: center;
    padding: 0.1rem 0;
}
.guide-con{
    width: 100%;
    height: 100%;
    padding-bottom: 1rem;
    box-sizing: border-box;
}
.guide-bg{
    width: 100%;
    height: 100%;
    background: #404040;
}
.guide-con img{
    position: absolute;
}
.guide0-0{
    bottom: 0;
    left: 0;
    width:4.28rem; 
}
.guide0-1{
    top: 0.9rem;
    left: 50%;
    width:4.72rem;
    margin-left: -2.36rem; 
}
.guide0-2{
    bottom: 0;
    left: 1.64rem;
    width:4.84rem;
}
.guide0-3{
    top: 3.06rem;
    left: 0;
    width:6.18rem;
}
.guide0-4{
    bottom: 0;
    right: 0.32rem;
    width:5.54rem;
}
.guide0-5{
    top: 0.96rem;
    left: 0;
    width:100%;
}
.guide0-6{
    bottom: 0;
    right: 0;
    width:4.38rem;
}
.guide0-7{
    top: 2.98rem;
    left: 0;
    width:100%;
}
.guide0-8{
    top: 5.18rem;
    left: 0;
    width:100%;
}
.guide1-0{
    bottom: 0;
    left: 0;
    width:4.28rem; 
}
.guide1-1{
    top: 0;
    left: 0;
    width:100%;
}
.guide1-2{
    bottom: 0;
    left: 1.64rem;
    width:4.84rem;
}
.guide1-3{
    top: 1.06rem;
    left: 0;
    width:100%;
}
.guide1-4{
    bottom: 0;
    right: 0.26rem;
    width:5.16rem;
}
.guide1-5{
    top: 0.96rem;
    left: 0;
    width:100%;
}
.guide1-6{
    top: 0;
    left: 0;
    width:100%;
}
.guide1-7{
    bottom: 1rem;
    left: 0;
    width:100%;
}
</style>